<template>
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="icons[activity.status]"
      :color="colors[activity.status]"
      size="large"
    >
      <div class="contest-problem-list" @click="goEditor(activity.problemId)">
        <div>{{ String.fromCharCode(activity.num+65) +"："+ activity.title }}</div>
        <div style="font-size: 15px;color: #ff7819">{{ activity.contestAccepted+" / "+activity.contestSubmit }}</div>
      </div>
      <el-divider />
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { listContestProblem } from '@/api/contest'
import { getUserId } from '@/utils/auth'

export default {
  name: 'ContestProblem',
  props: {
    contestId: {
      type: String,
      default: -1
    }
  },
  data() {
    return {
      icons: ['el-icon-check', 'el-icon-close'],
      colors: ['#0bbd87', '#e74c3c'],
      activities: [{
        problemId: 1000,
        title: '这是A题',
        status: 2,
        num: 0,
        contestAccepted: 12,
        contestSubmit: 23
      }]
    }
  },
  created() {
    listContestProblem({ contestId: this.contestId, userId: getUserId() }).then(res => {
      this.activities = res.data
    })
  },
  methods: {
    goEditor(problemId) {
      this.$router.push({
        path: '/editor',
        query: { problemId: problemId, contestId: this.contestId }
      })
    }
  }
}
</script>

<style scoped>
.contest-problem-list{
  height: 60px;
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
}
.contest-problem-list:hover{
  cursor: pointer;
  background-color: #f2f2f2;
  border-radius: 5px;
}
.el-timeline-item{
  padding-bottom: 0;
}
.el-divider--horizontal{
  margin: 5px 0;
}
</style>
